<script setup lang='ts' name="approval-acceptance">
import type { FormRules } from 'element-plus'

import { useExportDeliveryNote, useJcDeliveryNoteAcceptance } from '@fl/api/purchase'
import { useJcDeliveryNoteGetOne } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'

import { useTable } from './hooks/use-table'

const visible = defineModel<boolean>('visible')
const id = defineModel<string>('id')
const { data, isLoading } = useJcDeliveryNoteGetOne(id)

const { isPending: acceptanceLoading, mutate: acceptanceMuate } = useJcDeliveryNoteAcceptance()

const { isPending: exportLoading, mutate: exportMuate } = useExportDeliveryNote()

const state = { acceptanceAttach: [], acceptanceDate: '', acceptanceRemark: '' }
const form = ref<any>({ ...state })

const formRef = ref()
const tableRef = ref()

const attachmentUrlList = ref<any>([])

const acceptanceAttachList = ref<any>([])

const rules = reactive<FormRules<any>>({
    acceptanceAttach: [
        { message: '请上传验货单附件', required: true, trigger: 'blur' },
    ],
    acceptanceDate: [
        { message: '请选择验收时间', required: true, trigger: 'blur' },
    ],
    acceptanceRemark: [
        { message: '请输入验收说明', required: true, trigger: 'blur' },
    ],
})

const showAcceptanceInfo = computed(() => data.value?.deliveryNoteState !== 1)

const title = computed(() => data.value?.deliveryNoteState === 3 ? '申请验收' : '详情')

const { gridOptions } = useTable()

function exportFile() {
    exportMuate(String(id.value), {
        onSuccess: (res: any) => {
            const objectUrl = URL.createObjectURL(res)
            location.href = objectUrl
            URL.revokeObjectURL(objectUrl)
        },
    })
}

function showFile(file: any) {
    if (file) {
        window.open(file)
    }
}

function turnDown() {
    acceptanceData(2)
}

function submit() {
    acceptanceData(1)
}

function acceptanceData(acceptanceType: 1 | 2) {
    const params = {
        ...data.value,
        acceptanceType,
    }
    acceptanceMuate(params, {
        onSuccess: () => {
            ElMessage.success('操作成功')
            cancel()
        },
    })
}

function cancel() {
    visible.value = false
}
function reset() {
    id.value = ''
}

watchEffect(() => {
    if (data.value) {
        attachmentUrlList.value = data.value?.attachmentUrl ? JSON.parse(data.value?.attachmentUrl) : []
        acceptanceAttachList.value = data.value?.acceptanceAttach ? JSON.parse(data.value?.acceptanceAttach) : []
    }
})
</script>

<template>
    <el-dialog v-model="visible"
               width="1000"
               :close-on-click-modal="false"
               :title="title"
               align-center
               @close="cancel"
               @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    :rows="5"
        />

        <template v-else>
            <div class="info-title">
                发货信息
            </div>

            <el-form label-width="auto">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="预计发货时间:">
                            {{ data?.estimatedShippingDate }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="发货说明:">
                            {{ data?.shippingInstructions }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="物流公司:">
                            {{ data?.logisticsCompany }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="物流单号:">
                            {{ data?.trackingNumber }}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="发货单附件:">
                            <ul class="w-full">
                                <li v-for="item in attachmentUrlList"
                                    :key="item"
                                    class="truncate underline underline-offset-1 w-full cursor-pointer"
                                    :title="item"
                                    @click="showFile(item)"
                                >
                                    {{ item }}
                                </li>
                            </ul>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="info-title">
                商品信息
            </div>

            <SearchTable v-bind="gridOptions"
                         ref="tableRef"
                         :data="data?.products"
            />

            <template v-if="showAcceptanceInfo">
                <div class="info-title">
                    验收信息
                </div>

                <el-form ref="formRef"
                         :model="form"
                         :rules="rules"
                         label-width="auto"
                >
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="验收时间">
                                {{ data?.acceptanceDate }}
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="验收单附件">
                                <ul class="w-full">
                                    <li v-for="item in acceptanceAttachList"
                                        :key="item"
                                        class="truncate underline underline-offset-1 w-full cursor-pointer"
                                        :title="item"
                                        @click="showFile(item)"
                                    >
                                        {{ item }}
                                    </li>
                                </ul>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="验收说明">
                                {{ data?.acceptanceRemark }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </template>

            <div style="text-align: center;margin-top: 10px;">
                <el-button @click="cancel">
                    关闭
                </el-button>

                <template v-if="data?.deliveryNoteState === 3">
                    <el-button :loading="acceptanceLoading"
                               @click="turnDown"
                    >
                        驳回验收单
                    </el-button>

                    <el-button type="primary"
                               :loading="acceptanceLoading"
                               @click="submit"
                    >
                        同意验收
                    </el-button>
                </template>

                <el-button v-if="showAcceptanceInfo"
                           type="primary"
                           :loading="exportLoading"
                           @click="exportFile"
                >
                    导出验收单
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
}
</style>
